<template>
  <div>
    <el-card>
      <!-- 添加菜单 -->
      <el-row>
        <el-col style="text-align: right;">
          <el-button type="primary" size="mini" @click="addMenuBtnClick">添加菜单</el-button>
        </el-col>
      </el-row>
      <!-- 菜单列表-->
      <tree-table :data="menuList" stripe :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="No" border show-row-hover style="margin-top: 15px;">
        <template slot="isOpen" slot-scope="scope">
          <el-switch v-model="scope.row.menuStatus" @change="menuStatusChange(scope.row)"></el-switch>
        </template>
        <template ref="menuListRef" slot="opt" slot-scope="scope">
          <el-button size="mini" @click="moveUpBtnClick(scope.row)">上移</el-button>
          <el-button type="primary" size="mini" @click="moveDownBtnClick(scope.row)">下移</el-button>
          <el-button type="warning" size="mini" @click="editMenuBtnClick(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteMenuBtnClick(scope.row)">删除</el-button>
        </template>
      </tree-table>
    </el-card>
    <el-dialog v-dialogDrag title="编辑菜单" :visible.sync="editMenuDialog" width="40%" @closed="editMenuDialogClosed" center
      :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="menuDataFormRef" :model="menuDataForm" :rules="menuDataFormRules" label-position="right"
          label-width="80px">
          <!--菜单名称-->
          <el-form-item label="菜单名称" prop="menuName" v-on:keyup.enter.native="editMenu">
            <el-input v-model="menuDataForm.menuName"></el-input>
          </el-form-item>
          <!--菜单路径-->
          <el-form-item label="菜单路径" prop="menuPath" v-on:keyup.enter.native="editMenu">
            <el-input v-model="menuDataForm.menuPath"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="editMenu">提交</el-button>
        </div>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag title="添加菜单" :visible.sync="addMenuDialog" width="25%" @open="addMenuDialogOpen" center :close-on-click-modal="false">
      <span style="text-align: center">
        <el-form ref="addMenuFormRef" :model="addMenuForm" :rules="addMenuFormRules" label-position="right" label-width="80px">
          <!--菜单编号-->
          <el-form-item label="菜单编号" prop="menuRoot" v-on:keyup.enter.native="addMenu">
            <el-input v-model="addMenuForm.menuRoot"></el-input>
          </el-form-item>
          <!--菜单名称-->
          <el-form-item label="菜单名称" prop="menuName" v-on:keyup.enter.native="addMenu">
            <el-input v-model="addMenuForm.menuName"></el-input>
          </el-form-item>
          <!--菜单路径-->
          <el-form-item label="菜单路径" prop="menuPath" v-on:keyup.enter.native="addMenu">
            <el-input v-model="addMenuForm.menuPath"></el-input>
          </el-form-item>
          <!--父级菜单-->
          <el-form-item label="父级菜单" prop="menuNode">
            <el-col :span="24" style="text-align: left;">
              <el-select v-model="addMenuForm.menuNode" placeholder="请选择父级菜单" @change="menuNodeChange" style="width: 100%;">
                <el-option v-for="item in addMenuForm.menuNodes" :key="item.menuRoot" :label="item.menuName" :value="item.menuRoot">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="上级菜单" prop="menuParent">
            <el-col :span="24" style="text-align: left;">
              <el-select v-model="addMenuForm.menuParent" placeholder="请选择上级菜单" style="width: 100%;">
                <el-option v-for="item in addMenuForm.menuParents" :key="item.menuRoot" :label="item.menuName" :value="item.menuRoot">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="addMenu">提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      menuList: [],
      editMenuDialog: false,
      addMenuDialog: false,
      menuDataForm: {},
      menuNodeProps: {
        value: 'menuRoot',
        label: 'menuName',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true
      },
      addMenuForm: {
        menuRoot: '',
        menuName: '',
        menuNode: '',
        menuNodes: [],
        menuParent: '',
        menuParents: [],
        menuPath: ''
      },
      menuDataFormRules: {
        menuName: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }]
      },
      addMenuFormRules: {
        menuRoot: [{
          required: true,
          message: '请输入菜单编号',
          trigger: 'blur'
        }],
        menuName: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }],
        menuNode: [{
          required: true,
          message: '请选择父级菜单',
          trigger: 'change'
        }],
        menuParent: [{
          required: true,
          message: '请选择上级菜单',
          trigger: 'change'
        }]
      },
      columns: [{
        label: '菜单名称',
        prop: 'menuName',
        minWidth: '120px'
      },
      {
        label: '菜单节点',
        prop: 'menuNode',
        minWidth: '120px'
      },
      {
        label: '菜单编号',
        prop: 'menuRoot',
        minWidth: '120px'
      },
      {
        label: '菜单路径',
        prop: 'menuPath',
        minWidth: '120px'
      },
      {
        label: '菜单状态',
        type: 'template',
        template: 'isOpen'
      },
      {
        label: '操作',
        type: 'template',
        template: 'opt',
        minWidth: '280px'
      }
      ]
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    async getMenuList () {
      const res = await this.$apiUtil.get('menu/list', {})
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.menuList = res.data.children
    },
    async menuStatusChange (row) {
      const res = await this.$apiUtil.postByForm('menu/changeStatus', {
        menuId: row.menuId
      })
      console.log(res)
      if (res.code !== '200') {
        row.menuStatus = !row.menuStatus
        return this.$message.error(res.msg)
      }
      this.$message.success('修改菜单状态成功')
    },
    editMenuBtnClick (row) {
      this.editMenuDialog = true
      this.menuDataForm = row
    },
    editMenuDialogClosed () {
      this.$refs.menuDataFormRef.resetFields()
    },
    deleteMenuBtnClick (row) {
      this.$alert('确定删除菜单:' + row.menuName + ' ! ! !', '提示', {
        confirmButtonText: '确定',
        center: true,
        callback: async action => {
          if (action === 'confirm') {
            const res = await this.$apiUtil.postByForm('menu/delete', {
              menuId: row.menuId
            })
            console.log(res)
            if (res.code !== '200') {
              return this.$message.error(res.msg)
            }
            this.$message.success('删除菜单成功')
            this.getMenuList()
          }
        }
      })
    },
    async editMenu () {
      this.$refs.menuDataFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$apiUtil.postByForm('menu/edit', this.menuDataForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('编辑菜单成功')
        this.editMenuDialog = false
        this.getMenuList()
      })
    },
    addMenu () {
      this.$refs.addMenuFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$apiUtil.postByJson('menu/create', this.addMenuForm)
        console.log(res)
        if (res.code !== '200') {
          return this.$message.error(res.msg)
        }
        this.$message.success('添加菜单成功')
        this.getMenuList()
        this.addMenuDialog = false
      })
    },
    addMenuBtnClick () {
      this.addMenuDialog = true
      this.addMenuForm.menuNodes = this.menuList.slice()
      this.addMenuForm.menuNodes.splice(0, 0, {
        menuId: 1,
        menuName: '根目录',
        menuNode: 'root',
        menuParent: 'root',
        menuPath: '',
        menuRoot: 'root_menu',
        menuStatus: true
      })
    },
    addMenuDialogOpen () {
      if (this.$refs.addMenuFormRef !== undefined) {
        this.$refs.addMenuFormRef.resetFields()
      }
    },
    menuNodeChange () {
      this.addMenuForm.menuParents = []
      console.log(this.addMenuForm.menuParents)
      this.addMenuForm.menuParent = ''
      for (let i = 0, len = this.addMenuForm.menuNodes.length; i < len; i++) {
        if (this.addMenuForm.menuNode === 'root_menu') {
          this.addMenuForm.menuParents = this.addMenuForm.menuNodes.slice()
          break
        }
        if (this.addMenuForm.menuNodes[i].menuRoot === this.addMenuForm.menuNode) {
          this.addMenuForm.menuParents.push(this.addMenuForm.menuNodes[i])
          if (this.addMenuForm.menuNodes[i].children !== undefined && this.addMenuForm.menuNodes[i].children.length > 0) {
            this.addMenuForm.menuParents = this.addMenuForm.menuParents.concat(this.addMenuForm.menuNodes[i].children)
          }
        }
      }
    },
    async moveUpBtnClick (row) {
      const res = await this.$apiUtil.postByForm('menu/moveMenu', {
        menuId: row.menuId,
        moveType: 'up'
      })
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.getMenuList()
    },
    async moveDownBtnClick (row) {
      const res = await this.$apiUtil.postByForm('menu/moveMenu', {
        menuId: row.menuId,
        moveType: 'down'
      })
      console.log(res)
      if (res.code !== '200') {
        return this.$message.error(res.msg)
      }
      this.getMenuList()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
